<template>
  <div class="course_home">
    <barrages id="danmu" :chatMessageList="chatMessageList"></barrages>
    <video id="videoElement" controls muted v-if="!vedioContent.url">
      </video>
    <!-- <div v-if="!vedioContent.url">living</div> -->
    <video
      v-else
      id="myVideo"
      :key="currentVideo"
      style="width: 100%"
      preload="auto"
      controlsList="nodownload"
      controls
      autoplay
    >
      <source :src="vedioContent.url" type="video/mp4" />
    </video>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "@/utils/axios";
import * as socket from "@/utils/socket";
import flvjs from "flv.js";
import barrages from "./class/bulletScreen.vue";

export default {
  name: "CourseHome",
  components:{
    barrages
  },
  data() {
    return {
      // 视频播放
      currentVideo: 1,
      videoState: false, // 视频播放状态
      // 学时
      studyTime: {
        currentTime: 0, // 当前已学时长
        duration: 0, // 总时长
      },
      timer: {}, // 定时器
      pauseTimer: {}, // 暂停定时器
      lessonId: this.$route.query.lessonId,
    };
  },
  mounted() {
    this.pullVideoStream();
    // 初始化WEB socket 管道
    socket.createInstance("student", this, this.lessonId);

    socket.sendEvent("joinRoom", {
      actionType: "enter",
      role: "student",
      roomId: this.lessonId,
      data: { studentId: this.studentId, studentName: this.studentName },
    });
    // 初始化腾讯实时音视频
  },
  watch: {
    vedioContent: {
      handler: function () {
        let player = document.querySelector("#myVideo");
        player.src = this.vedioContent.url;
        player.play();
      },
      deep: true,
    },
    /*let player = document.querySelector('#root') 
player.src = "新的地址" 
player.play()*/
  },
  computed: {
    ...mapState({
      vedioContent: (state) => state.student.vedioStatus,
      userId: (state) => state.public.uid,
      studentId: (state) => state.public.studentId,
      studentName: (state) => state.public.userName,
      chatMessageList: (state) => state.student.chatMessage,
    }),
  },
  methods: {
    pullVideoStream() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        let roomNumber = this.$route.query.roomNumber;
        var flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasVideo: true,
          hasAudio: true,
          url: `${this.$URLS.liveServer}/live?port=1935&app=live&stream=${roomNumber}`,
        });
        this.player = flvPlayer;
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        // play | pause
        flvPlayer.play();
      } else {
        alert(
          `您的浏览器不支持视频流播放\n建议使用 Chrome、FireFox 等主流浏览器`
        );
      }
    },
    joinRoom() {
      this.client
        .join({ roomId: this.lessonId, role: "audience" })
        .catch((error) => {
          console.error(error);
          this.$message.success("进入教室失败，请刷新后重试");
        })
        .then(() => {
          this.$message.success("成功进入教室");
          this.client.on("stream-added", (event) => {
            this.client.subscribe(event.stream);
          });
          this.client.on("stream-subscribed", (event) => {
            // 删除可能出现的多余播放器
            let player = document.getElementById("remote_stream");
            // console.log("player");
            // console.log(player);
            player.innerHTML = "";
            // 开始播放
            event.stream.play("remote_stream");
          });
        });
    },
  },
};
</script>

<style>
/* .father{
  position:relative;
  z-index:-1;
  --width: 100%;
  --height: 300px;
  width: var(--width);
  height: var(--height);

} */
#videoElement {
  /* 屏幕宽度，在这改 */
  --width: 100%;
  --height: 300px;
  width: var(--width);
  height: var(--height);
  position:relative;
  z-index:-1;
}

/* #danmu{
  position:absolute;
  top:10px
}  */

</style>
